html, body, div {
    margin: 0;
    padding: 0;
}

body, svg {
    font-family: "Microsoft Yahei", "Heiti SC", Arial, sans-serif;
}

html, body {
    height: 100%;
}

#content-wrapper {
    overflow: hidden;
    .dock;
    position: fixed;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    cursor: default;
    background: url('../img/bg.jpg');
    &.loading.notlogin{
        &:after {
            background: fadeOut(rgb(128, 130, 140), 15%);
            .animation(fadeIn 3s ease);
        }
    }
}

#chess {
    height: 726px;
    width: 600px;
    margin: 0 auto;
    position: relative;
    background-image: url('../img/bg.png');
    background-repeat: no-repeat;
    background-position:0 -28px;
    &:focus {
/*         box-shadow: inset 0 0 10px fadeOut(black, 0.5); */
    }
    -moz-user-select: none;
    &>.chess-bakcground{
        
    }
}
#main-panel{
    position: absolute;
    width: 100%;
    top: 300px;
    &>.main{
        &.main-online{
            background-image: url('../image/online.png');
        }
        &.main-start{
            background-image: url('../image/start.png');
        }
        &.main-create{
            background-image: url('../image/createroom.png');   
        }
        &.main-join{
            background-image: url('../image/joinroom.png');   
        }
        width: 125px;
        height: 47px;
        display: block;
        margin: 0 auto 15px auto;
        background-color: transparent;
        
        background-position: 0px -1px;
        background-repeat: no-repeat;
        border-radius: 10px;
        &:hover{
            background-position: 0px -61px;
        }
        &:active{
            background-position: 0px -125px;
        }
    }
}
#options-panel{
    position: absolute;
    top: 550px;
    right: -100px;
    &>button{
        &.undo{
            background-image: url('../image/undo.png');
        }
        &.draw{
            background-image: url('../image/draw.png');
        }
        &.fail{
            background-image: url('../image/fail.png');
        }
       
        display: block;
        width: 80px;
        background-color: transparent;
        background-position: 0px -1px;
        background-repeat: no-repeat;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 0;
        &:hover{
            background-position: 0px -53px;
        }
        &:active{
            background-position: 0px -103px;
        }
    }
}
#time-panel{
    position: absolute;
    top: 300px;
    width:100%;
    &>.j0-time,&>.J0-time{
        width: 250px;
        height: 100px;
        position: absolute;
        padding-left: 90px;
        &>p{
            font-size: 17px;
            line-height: 30px;
            color: black;
            font-weight: 900;
        }
        &.right-bottom{
            right: -260px;
            bottom: -230px;
        }
        &.left-top{
            left: -260px;
            top: -85px; 
        }
        background-repeat: no-repeat;
        background-color: transparent;
    }
    &>.j0-time{
        &.active{
            background-image: url('../image/2.png');
        }
    }
     &>.J0-time{
        &.active{
            background-image: url('../image/J.png');
        }
    }

}
/**
    载入动画
*/

.spinner {
  margin: 10px auto;
  width: 100px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > div {
  background-color: #A91E1B;
    height: 100%;
    width: 6px;
    border-radius: 4px;
    margin: 0 5px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

